<template>
  <div class="container">
    <!-- 搜索区域 -->
    <div class="search-container">
    <button class="today-button" @click="scrollToToday">
       <i class="fas fa-clock"></i> 今天
     </button>
      <div class="search-box">
        <i class="fas fa-search"></i>
        <input 
          type="text" 
          v-model="searchQuery" 
          placeholder="搜索订单号或模具号..." 
          @input="handleSearch"
        >
      </div>
      <div class="search-result">
        找到 {{ filteredOrders.length }} 个匹配结果，显示 {{ filteredMachines.length }} 台相关压机
      </div>
    </div>
    
    <div class="gantt-container">
      <div class="header-container">
        <div class="machine-header">
          <div class="header-cell">设备名称</div>
        </div>
        <div class="date-header-container" ref="dateHeader" @mousedown="startDragging" @mousemove="handleDrag" @mouseup="stopDragging" @mouseleave="stopDragging">
          <div class="date-header" ref="dateHeaderContent">
            <div 
              v-for="(date, index) in dateHeaders" 
              :key="index"
              :class="['date-cell', { 
                'today': isToday(date), 
                'weekend': isWeekend(date) 
              }]"
            >
              {{ formatDateHeader(date) }}
            </div>
          </div>
        </div>
      </div>

      <div class="body-container" ref="scrollContainer">
        <div class="scroll-indicator" v-if="showScrollHint">
          <i class="fas fa-arrows-alt-h"></i> 点击并拖动日期表头滚动
        </div>
        
        <div class="machine-names">
          <div 
            v-for="machine in filteredMachines" 
            :key="machine.id"
            class="machine-cell"
          >
            <i class="fas fa-industry"></i> {{ machine.name }}
          </div>
        </div>
        
        <div class="gantt-body">
          <div 
            v-for="machine in filteredMachines" 
            :key="'row-'+machine.id"
            class="gantt-row"
          >
            <div 
              v-for="(date, dateIndex) in dateHeaders" 
              :key="'cell-'+dateIndex"
              :class="['gantt-cell', { 'weekend': isWeekend(date) }]"
            >
              <div 
                v-for="order in getFilteredOrdersForCell(machine.id, date)" 
                :key="order.id"
                class="order-block"
                :style="getOrderBlockStyle(order, date)"
                @mouseenter="showTooltip($event, order)"
                @mouseleave="hideTooltip"
              >
                <span class="order-id">{{ order.id }}</span>
                <span class="separator">|</span>
                <span class="mold-id">{{ order.mold_id }}</span>
              </div>
              <div v-if="isToday(date)" class="today-marker"></div>
              <div 
                v-if="getFilteredOrdersForCell(machine.id, date).length === 0" 
                class="empty-cell"
              >
                空闲
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div v-if="tooltip.visible" class="tooltip" :style="tooltipStyle">
      <h4>{{ tooltip.order.id }}</h4>
      <p>模具号: {{ tooltip.order.mold_id || '未知' }}</p>
      <p><span class="status-indicator" :class="'status-' + tooltip.order.status"></span> 状态: {{ getStatusText(tooltip.order.status) }}</p>
      <p><i class="fas fa-industry"></i> 设备: {{ tooltip.order.machine }}</p>
      <p><i class="fas fa-play-circle"></i> 开始: {{ formatDate(tooltip.order.startDate) }}</p>
      <p><i class="fas fa-flag-checkered"></i> 结束: {{ formatDate(tooltip.order.endDate) }}</p>
      <p><i class="fas fa-hourglass-half"></i> 时长: {{ tooltip.order.duration }}天</p>
      <p><i class="fas fa-box"></i> 产品: {{ tooltip.order.product }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    // 生成6台压机
    const machines_ = ['B-01', 'B-02', 'B-03', 'B-04', 'Q-01', 'Q-02']
    // const machines = Array.from({ length: 6 }, (_, i) => ({
    //   id: i + 1,
    //   name: `压机${i + 1}#`
    // }));
    const machines = []
    for(let i = 0;i<machines_.length;i++){
      let a = {
        id:i+1,
        name:machines_[i]
      }
      machines.push(a)
    }
    console.log("GGGGGGGGGGGG",machines)
    

    // 生成日期表头（当前日期前后各30天）
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    const dateHeaders = Array.from({ length: 61 }, (_, i) => {
      const date = new Date(today);
      date.setDate(today.getDate() - 30 + i);
      return date;
    });

    return {
      machines,
      dateHeaders,
      orders: [], // 原始订单数据
      filteredOrders: [], // 搜索过滤后的订单
      filteredMachines: [], // 过滤后的压机列表
      cellWidth: 100,
      tooltip: {
        visible: false,
        order: null,
        x: 0,
        y: 0
      },
      showScrollHint: true,
      // 拖动相关状态
      isDragging: false,
      lastX: 0,
      scrollLeft: 0,
      // 无限滚动相关状态
      scrollThreshold: 300,
      isLoading: false,
      // 搜索相关状态
      searchQuery: ''
    };
  },
  computed: {
    dateRangeText() {
      if (this.dateHeaders.length === 0) return '';
      const start = this.formatDate(this.dateHeaders[0]);
      const end = this.formatDate(this.dateHeaders[this.dateHeaders.length - 1]);
      return `${start} 至 ${end}`;
    },
    tooltipStyle() {
      return {
        left: `${this.tooltip.x}px`,
        top: `${this.tooltip.y}px`
      };
    }
  },
  mounted() {
    this.syncScroll();
    this.get_data_orders(); // 加载时获取数据
    
    // 5秒后隐藏滚动提示
    setTimeout(() => {
      this.showScrollHint = false;
    }, 5000);
    
    // 设置日期表头的样式，使其可以被拖动
    this.$refs.dateHeader.style.cursor = 'grab';
    
    // 添加滚动事件监听，实现无限滚动
    this.$refs.dateHeader.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    // 移除滚动事件监听
    this.$refs.dateHeader.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    scrollToToday() {
     const today = new Date();
     today.setHours(0, 0, 0, 0);
     
     // 查找当天日期在dateHeaders中的索引
     const index = this.dateHeaders.findIndex(date => 
       date.toDateString() === today.toDateString()
     );

     if (index === -1) return;

     // 计算滚动位置
     const cellWidth = this.cellWidth;
     const scrollPosition = index * cellWidth;
     
     // 执行滚动
     this.$refs.dateHeader.scrollLeft = scrollPosition;
     this.$refs.scrollContainer.scrollLeft = scrollPosition;

     // 可选：高亮今天单元格
     this.highlightTodayCell(index);
   },

   highlightTodayCell(index) {
     // 移除之前高亮
     document.querySelectorAll('.date-cell').forEach(cell => {
       cell.classList.remove('highlighted');
     });

     // 添加新高亮
     const cell = this.$refs.dateHeaderContent.children[index];
     if (cell) {
       cell.classList.add('highlighted');
     }
   },
    get_data_orders(){
        console.log("开始加载订单数据...")
        this.http.get('api/material_plan_xie/get_db_proinfo', {}).then((reslut) => {
            console.log("接口返回数据：", reslut);
            if (!reslut || !reslut.length) {
            console.log("接口返回空数据");
            return;
            }

            this.orders = [];
            const today = new Date();
            today.setHours(0, 0, 0, 0);

            reslut.forEach(item => {
            // 1. 处理压机ID
            const machineId = item.yx_device;
            if (!machineId || isNaN(machineId) || machineId < 1 || machineId > 6) {
                console.log(`跳过无效压机ID的数据：${machineId}`);
                return;
            }

            // 2. 安全处理日期
            const startDateStr = item.yx_startdate || '';
            const startDate = this.parseDate(startDateStr);
            if (!startDate) {
                console.log(`跳过无效开始日期的数据：${startDateStr}`);
                return;
            }

            // 3. 安全处理持续天数
            const duration = parseInt(item.yx_dunring || '1', 10);
            if (isNaN(duration) || duration < 1) {
                console.log(`无效持续天数，默认设为1天：${item.yx_dunring}`);
            }

            // 4. 计算结束日期
            const endDate = new Date(startDate);
            endDate.setDate(startDate.getDate() + duration - 1);

            // 5. 确定订单状态
            let status = 'pending';
            if (endDate < today) {
                status = 'completed';
            } else if (startDate <= today && endDate >= today) {
                status = 'active';
            }

            // 6. 生成随机颜色和文本颜色
            const color = this.generateRandomColor();
            const textColor = this.getContrastColor(color);

            // 7. 构建订单对象，包含模具号
            const order = {
                id: item.schedule_id || `ORD-${Date.now()}`,
                mold_id: item.mold_id || '未知', // 模具号
                machineId: machineId,
                startDate: startDate,
                endDate: endDate,
                duration: duration,
                status: status,
                product: item.top_id || '未知产品',
                color: color,
                textColor: textColor
            };

            this.orders.push(order);
            });

            // 初始时显示所有订单和压机
            this.filteredOrders = [...this.orders];
            this.filteredMachines = [...this.machines];
            console.log("订单数据生成完成，共", this.orders.length, "条");
        }).catch((error) => {
            console.error("接口请求失败：", error);
        });
        },

    // 处理搜索：根据订单号或模具号过滤，只显示相关的订单和压机
    handleSearch() {
      if (!this.searchQuery.trim()) {
        // 如果搜索为空，显示所有订单和压机
        this.filteredOrders = [...this.orders];
        this.filteredMachines = [...this.machines];
        return;
      }
      
      const query = this.searchQuery.trim().toLowerCase();
      
      // 模糊搜索：包含关键词的订单
      this.filteredOrders = this.orders.filter(order => 
        order.id.toLowerCase().includes(query) || 
        (order.mold_id && order.mold_id.toLowerCase().includes(query))
      );
      
      // 获取这些订单涉及的所有压机ID
      const machineIds = [...new Set(this.filteredOrders.map(order => order.machineId))];
      
      // 只显示涉及的压机
      this.filteredMachines = this.machines.filter(machine => 
        machineIds.includes(machine.id)
      );
    },

    // 安全解析日期
    parseDate(dateStr) {
        if (typeof dateStr !== 'string' || !dateStr.trim()) {
            return null;
        }
        const date = new Date(dateStr);
        return isNaN(date.getTime()) ? null : date;
    },

    // 生成随机颜色
    generateRandomColor() {
      const letters = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    },

    // 计算与背景色对比明显的文本颜色
    getContrastColor(hexColor) {
      hexColor = hexColor.replace('#', '');
      const r = parseInt(hexColor.substring(0, 2), 16);
      const g = parseInt(hexColor.substring(2, 4), 16);
      const b = parseInt(hexColor.substring(4, 6), 16);
      const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
      return luminance > 0.5 ? '#000000' : '#FFFFFF';
    },

    // 处理滚动事件，实现无限滚动
    handleScroll() {
      const { scrollLeft, scrollWidth, clientWidth } = this.$refs.dateHeader;
      if (scrollLeft < this.scrollThreshold && !this.isLoading) {
        this.loadMoreDates('left');
      }
      if (scrollLeft + clientWidth > scrollWidth - this.scrollThreshold && !this.isLoading) {
        this.loadMoreDates('right');
      }
    },

    // 加载更多日期
    loadMoreDates(direction) {
      this.isLoading = true;
      setTimeout(() => {
        const currentStartDate = this.dateHeaders[0];
        const currentEndDate = this.dateHeaders[this.dateHeaders.length - 1];
        const newDates = [];
        
        if (direction === 'left') {
          for (let i = 1; i <= 30; i++) {
            const newDate = new Date(currentStartDate);
            newDate.setDate(currentStartDate.getDate() - i);
            newDates.unshift(newDate);
          }
          const scrollOffset = newDates.length * this.cellWidth;
          this.$refs.dateHeader.scrollLeft += scrollOffset;
          this.$refs.scrollContainer.scrollLeft += scrollOffset;
          this.dateHeaders = [...newDates, ...this.dateHeaders];
        } else {
          for (let i = 1; i <= 30; i++) {
            const newDate = new Date(currentEndDate);
            newDate.setDate(currentEndDate.getDate() + i);
            newDates.push(newDate);
          }
          this.dateHeaders = [...this.dateHeaders, ...newDates];
        }
        this.isLoading = false;
      }, 300);
    },

    // 开始拖动
    startDragging(e) {
      this.isDragging = true;
      this.lastX = e.pageX;
      this.scrollLeft = this.$refs.dateHeader.scrollLeft;
      this.$refs.dateHeader.style.cursor = 'grabbing';
      this.$refs.dateHeader.style.userSelect = 'none';
    },

    // 处理拖动
    handleDrag(e) {
      if (!this.isDragging) return;
      e.preventDefault();
      const x = e.pageX;
      const walk = (x - this.lastX) * 1.5;
      this.$refs.dateHeader.scrollLeft = this.scrollLeft - walk;
      this.$refs.scrollContainer.scrollLeft = this.scrollLeft - walk;
    },

    // 停止拖动
    stopDragging() {
      this.isDragging = false;
      this.$refs.dateHeader.style.cursor = 'grab';
      this.$refs.dateHeader.style.userSelect = 'auto';
    },

    // 同步滚动
    syncScroll() {
      const header = this.$refs.dateHeader;
      const content = this.$refs.scrollContainer;
      header.addEventListener('scroll', () => {
        content.scrollLeft = header.scrollLeft;
      });
      content.addEventListener('scroll', () => {
        header.scrollLeft = content.scrollLeft;
      });
    },

    // 日期格式化
    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },

    // 日期表头格式化
    formatDateHeader(date) {
      const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
      return `${date.getMonth() + 1}/${date.getDate()} ${days[date.getDay()]}`;
    },

    // 检查是否是今天
    isToday(date) {
      const today = new Date();
      return date.getDate() === today.getDate() && 
             date.getMonth() === today.getMonth() && 
             date.getFullYear() === today.getFullYear();
    },

    // 检查是否是周末
    isWeekend(date) {
      const day = date.getDay();
      return day === 0 || day === 6;
    },

    // 获取指定单元格的过滤后订单
    getFilteredOrdersForCell(machineId, date) {
      return this.filteredOrders.filter(order => 
        order.machineId === machineId && 
        date >= order.startDate && 
        date <= order.endDate &&
        this.isSameDate(date, order.startDate)
      );
    },

    // 获取指定单元格的所有订单（用于搜索前）
    getOrdersForCell(machineId, date) {
      return this.orders.filter(order => 
        order.machineId === machineId && 
        date >= order.startDate && 
        date <= order.endDate &&
        this.isSameDate(date, order.startDate)
      );
    },

    // 获取订单块的样式
    getOrderBlockStyle(order, date) {
      const days = order.duration;
      return {
        width: `${days * this.cellWidth - 8}px`,
        backgroundColor: order.color,
        color: order.textColor
      };
    },

    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        active: '生产中',
        completed: '已完成',
        pending: '待生产'
      };
      return statusMap[status] || status;
    },

    // 检查两个日期是否相同
    isSameDate(date1, date2) {
      return date1.getDate() === date2.getDate() && 
             date1.getMonth() === date2.getMonth() && 
             date1.getFullYear() === date2.getFullYear();
    },

    // 显示订单工具提示
    showTooltip(event, order) {
      this.tooltip = {
        visible: true,
        order: {
          ...order,
          machine: this.machines.find(m => m.id === order.machineId)?.name || '未知设备'
        },
        x: event.pageX + 15,
        y: event.pageY
      };
    },

    // 隐藏工具提示
    hideTooltip() {
      this.tooltip.visible = false;
    },

    // 移动日期范围
    shiftDateRange(days) {
      this.dateHeaders = this.dateHeaders.map(date => {
        const newDate = new Date(date);
        newDate.setDate(date.getDate() + days);
        return newDate;
      });
    },

    // 返回今天
    goToToday() {
      const today = new Date();
      today.setHours(0, 0, 0, 0);
      this.dateHeaders = Array.from({ length: 61 }, (_, i) => {
        const date = new Date(today);
        date.setDate(today.getDate() - 30 + i);
        return date;
      });
      this.$refs.dateHeader.scrollLeft = 30 * this.cellWidth;
      this.$refs.scrollContainer.scrollLeft = 30 * this.cellWidth;
    }
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-align: center;
}

/* 新增按钮样式 */
.today-button {
 background: #4CAF50;
 color: white;
 border: none;
 padding: 8px 12px;
 border-radius: 4px;
 cursor: pointer;
 margin-right: 10px;
 transition: background 0.3s;
 font-size: 14px;
}
.today-button:hover {
 background: #45a049;
}

/* 高亮样式 */
.date-cell.highlighted {
 background: linear-gradient(to bottom, #ffc107, #e0a800);
 font-weight: bold;
}

/* 搜索区域样式 */
.search-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 20px 10px;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.search-box input {
  flex-grow: 1;
  padding: 10px 15px 10px 35px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s;
}

.search-box input:focus {
  border-color: #3498db;
}

.search-box i {
  position: absolute;
  left: 15px;
  color: #999;
}

.search-result {
  margin-top: 8px;
  font-size: 13px;
  color: #666;
  text-align: right;
}

.container {
  width: calc(100% - 40px);
  height: calc(100vh - 110px); /* 调整高度以适应搜索框 */
  margin: 20px;
  padding: 0;
}

.gantt-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.header-container {
  display: flex;
  background-color: #2c3e50;
  color: white;
  z-index: 10;
}

.machine-header {
  width: 150px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #3a506b;
  position: sticky;
  left: 0;
  z-index: 20;
}

.date-header-container {
  flex-grow: 1;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #3498db #2c3e50;
}

.date-header-container::-webkit-scrollbar {
  height: 8px;
}

.date-header-container::-webkit-scrollbar-track {
  background: #2c3e50;
}

.date-header-container::-webkit-scrollbar-thumb {
  background: #3498db;
  border-radius: 4px;
}

.date-header {
  display: flex;
  height: 100%;
  min-width: max-content;
}

.date-cell {
  width: 100px;
  padding: 15px 0;
  text-align: center;
  border-right: 1px solid #3a506b;
  flex-shrink: 0;
  font-weight: 500;
  background-color: #2c3e50;
  transition: background-color 0.2s;
  position: relative;
}

.date-cell.today {
  background: linear-gradient(to bottom, #e74c3c, #c0392b);
  font-weight: bold;
}

.date-cell.today::after {
  content: "今天";
  position: absolute;
  bottom: 3px;
  left: 0;
  right: 0;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.9);
}

.date-cell.weekend {
  background-color: #34495e;
}

.body-container {
  display: flex;
  flex-grow: 1;
  overflow: auto;
  position: relative;
}

.machine-names {
  width: 150px;
  flex-shrink: 0;
  background-color: #f8f9fa;
  border-right: 1px solid #e0e0e0;
  position: sticky;
  left: 0;
  z-index: 15;
}

.machine-cell {
  height: 70px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #e0e0e0;
  font-weight: 600;
  color: #2c3e50;
  background-color: #f8f9fa;
  transition: all 0.2s;
  font-size: 1.1rem;
  position: sticky;
  left: 0;
  z-index: 10;
}

.machine-cell:hover {
  background-color: #e9ecef;
}

.gantt-body {
  flex-grow: 1;
  min-width: max-content;
  position: relative;
}

.gantt-row {
  display: flex;
  height: 70px;
  border-bottom: 1px solid #e0e0e0;
  position: relative;
}

.gantt-cell {
  width: 100px;
  flex-shrink: 0;
  border-right: 1px solid #e0e0e0;
  position: relative;
  background-color: #ffffff;
  transition: background-color 0.2s;
}

.gantt-cell.weekend {
  background-color: #f9f9f9;
}

.gantt-cell:hover {
  background-color: #f0f8ff;
}

.order-block {
  position: absolute;
  top: 10px;
  height: 50px;
  left: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 600;
  font-size: 12px;
  padding: 0 8px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 1;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.order-block .separator {
  opacity: 0.7;
}

.order-block:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
  z-index: 3;
}

.tooltip {
  position: fixed;
  background: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
  max-width: 300px;
  z-index: 100;
  pointer-events: none;
  transform: translate(10px, -50%);
  backdrop-filter: blur(4px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  line-height: 1.6;
  text-align: left;
}

.tooltip h4 {
  margin-bottom: 8px;
  color: #3498db;
  font-size: 16px;
  text-align: left;
}

.tooltip p {
  margin: 4px 0;
  text-align: left;
}

.status-indicator {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
}

.status-active {
  background-color: #2ecc71;
}

.status-completed {
  background-color: #3498db;
}

.status-pending {
  background-color: #f39c12;
}

.empty-cell {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #95a5a6;
  font-size: 12px;
  font-style: italic;
}

.today-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e74c3c;
  z-index: 2;
}

.scroll-indicator {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 992px) {
  .gantt-container {
    height: 100%;
  }
  
  .date-cell, .gantt-cell {
    width: 80px;
  }
  
  .machine-header, .machine-names {
    width: 120px;
  }
  
  .order-block {
    font-size: 11px;
    gap: 4px;
    padding: 0 5px;
  }
}

@media (max-width: 768px) {
  .container {
    width: calc(100% - 20px);
    height: calc(100vh - 100px);
    margin: 10px;
  }
  
  .date-cell, .gantt-cell {
    width: 70px;
    font-size: 0.85rem;
  }
  
  .machine-header, .machine-names {
    width: 100px;
  }
  
  .machine-cell {
    font-size: 1rem;
  }
  
  .order-block {
    font-size: 10px;
    gap: 3px;
    padding: 0 3px;
  }
}
</style>